<template>
  <div class="train-box">
    <div class="train-title">{{ trainObj.title }}</div>
    <div class="train-item">
      <span class="head">
        <img src="../assets/train-head-left.png" alt="" />
      </span>
      <span class="train-item-1">
        <img
          v-if="trainObj.carriage_1.crowding_degree === 0"
          src="../assets/train-status-1.png"
          alt=""
        />
        <img
          v-if="trainObj.carriage_1.crowding_degree === 1"
          src="../assets/train-status-2.png"
          alt=""
        />
        <img
          v-if="trainObj.carriage_1.crowding_degree === 2"
          src="../assets/train-status-3.png"
          alt=""
        />
        <span class="text">{{ trainObj.carriage_1.temperture }}</span>
      </span>
      <span class="train-item-1">
        <img
          v-if="trainObj.carriage_2.crowding_degree === 0"
          src="../assets/train-status-1.png"
          alt=""
        />
        <img
          v-if="trainObj.carriage_2.crowding_degree === 1"
          src="../assets/train-status-2.png"
          alt=""
        />
        <img
          v-if="trainObj.carriage_2.crowding_degree === 2"
          src="../assets/train-status-3.png"
          alt=""
        />
        <span class="text">{{ trainObj.carriage_2.temperture }}</span>
      </span>
      <span class="train-item-1">
        <img
          v-if="trainObj.carriage_3.crowding_degree === 0"
          src="../assets/train-status-1.png"
          alt=""
        />
        <img
          v-if="trainObj.carriage_3.crowding_degree === 1"
          src="../assets/train-status-2.png"
          alt=""
        />
        <img
          v-if="trainObj.carriage_3.crowding_degree === 2"
          src="../assets/train-status-3.png"
          alt=""
        />
        <span class="text">{{ trainObj.carriage_3.temperture }}</span>
      </span>
      <span class="head">
        <img src="../assets/train-head-right.png" alt="" />
      </span>
    </div>
    <div class="train-bottom">
      <span class="men">
        <img src="../assets/men.png" alt="" />
        <img class="status" src="../assets/status-1.png" alt="" />
      </span>
      <span class="men">
        <img src="../assets/men.png" alt="" />
        <img class="status" src="../assets/status-2.png" alt="" />
      </span>
      <span class="men">
        <img src="../assets/men.png" alt="" />
        <img class="status" src="../assets/status-3.png" alt="" />
      </span>
      <span class="line"></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    trainObj: Object
  }
};
</script>

<style lang="scss" scoped>
.train-box {
  width: 485px;
  display: inline-block;
  margin-left: 20px;
}
.train-item-1 {
  width: 143px;
  display: inline-block;
  position: relative;
  padding-left: 2px;
  .text {
    color: #fff;
    position: absolute;
    top: 6px;
    left: 0px;
    font-size: 16px;
    width: 145px;
    text-align: center;
  }
}
.train-title {
  font-size: 16px;
  text-align: left;
  line-height: 40px;
  padding-bottom: 20px;
}
.train-bottom {
  position: relative;
  text-align: center;
}
.line {
  width: 100%;
  height: 1px;
  background: #999;
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 0;
}
.men {
  display: inline-block;
  width: 150px;
  padding-top: 9px;
  vertical-align: top;
  img {
    display: block;
    margin: 0 auto;
  }
  .status {
    margin-top: 10px;
  }
}
</style>
